<template>
  <div class="hello">
    <div>
        <div id="box" @click="handleClick">状态选择</div>
        <div v-if="status" id="selectBox">
          <ul class="select">
              <li><input type="checkbox" v-model="newList" value="实施中" @change="handleClickChange(
              )" >实施中</li>
              <li><input type="checkbox" v-model="newList"  value="讨论中"   @change="handleClickChange()">讨论中</li>
              <li><input type="checkbox" v-model="newList"  value="关闭中"   @change="handleClickChange()">关闭中</li>

              <li><input type="checkbox" v-model="newList2" value="选中所有"  @change="handleClickChangeAll">全选</li>
          </ul>
          <button value="5">确定</button>
        </div>  
    </div>
    

    
    <table border cellspacing="0" cellpadding="0" width="100%" dlass="tablebox">
      <tr v-for="item in tablist">
        <td>{{item.cid}}</td>
        <td>{{item.cname}}</td>
        <td>{{item.number}}</td>
        <td>{{item.title}}</td>
        <td>{{item.age}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      newList: [`实施中`, `讨论中`, `关闭中`],
      newList1: [`实施中`, `讨论中`, `关闭中`],
      newList2: [`选中所有`],
      tablist: [
        {
          cid: "讨论中",
          cname: "天文",
          number: 6884359,
          title: "affd",
          age: 32
        },
        {
          cid: "关闭中",
          cname: "爱情",
          number: 7445692,
          title: "affd",
          age: 39
        },
        {
          cid: "实施中",
          cname: "哲学",
          number: 6884359,
          title: "affd",
          age: 37
        },
        {
          cid: "讨论中",
          cname: "爱情",
          number: 7114157,
          title: "affd",
          age: 32
        },
        {
          cid: "关闭中",
          cname: "爱情",
          number: 6884359,
          title: "affd",
          age: 32
        },
        {
          cid: "实施中",
          cname: "历史",
          number: 7114157,
          title: "affd",
          age: 32
        }
      ],
      allData: [],
      status: false
    };
  },
  created() {
    // console.log(this.tablist);
    this.allData = this.tablist;

    // console.log(this.allData);
  },

  methods: {
    handleClick() {
      this.status = !this.status;
    },

    // 当点击其他复选框时
    handleClickChange() {
      // 改变this指向
      let that = this;

      // 每次点击就检测是否为全选状态
      if (this.newList.length === 3) {
        // 如果是那就把全选的框勾上
        that.newList2 = [`选中所有`];
      } else {
        // 反之取消全选勾选状态
        that.newList2 = [];
      }

      // 更改表格数据（视图）
      let arrNew = [];
      // 根据选中的类别展示对应的数据
      for (let i = 0; i < that.newList.length; i++) {
        that.allData.forEach(function(item, index) {
          if (that.newList[i] === item.cid) {
            arrNew.push(item);
          }
        });
      }
      // 把最终数据赋值给表格数据
      that.tablist = arrNew;
    },

    // 当点击全选的时候
    handleClickChangeAll() {
      // 检测如果已经全选状态，那么展开全选样式
      if (this.newList.length === 3) {
        this.newList = [];
        this.handleClickChange();
      } else {
        // 反之取消全选
        this.newList = this.newList1;
        this.handleClickChange();
      }
    }
  }
};
</script>


<style scoped>
/* .select li{
  float:left;
  margin-left:20px;
} */
* {
  padding: 0;
  margin: 0;
}
/*  
        #box {
          
           border:1px solid green;
           width:100px;
        }
 
        #selectBox {
            position: absolute;
            left: 30px;
            top: 60px;
        }
 
        ul {
            list-style: none;
        } */
.tablebox {
  position: absolute;
  top: 500px;
}
</style>
